<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>{$system_info['title']}</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <template id="appcnt">
        <el-container style="height: 100%">

            <el-container style="height: 100%">
                <el-aside :width="isCollapse ? '66px': '200px'" style="height: 100%">
                    <el-menu
                            style="height: 100%"
                            :collapse="isCollapse"
                            :unique-opened="true"
                            default-active="2"
                            class="el-menu-vertical-demo"
                    >
                        <div style="display:block; text-align: center; background-color: rgb(24, 144, 255); padding: 10px 0; overflow: hidden; color: #fff; font-size: 18px;">
                            <a href="" style="color: #fff; text-decoration: none;" v-if="!isCollapse">
                                <el-avatar  shape="square" :size="20" src="{$appInfo.image}" style="vertical-align: middle"></el-avatar>
                                <span>{$appInfo.title}</span>
                            </a>
                            <i class="el-icon-s-operation" @click="isCollapse=!isCollapse"></i>
                        </div>
                        <template v-for="(menu, index) in subMenu">
                            <el-menu-item :index="`elMenu${index}`" v-if="!menu.child"
                                          @click="openUrl(menu.uri, menu.title)">
                                <i :class="menu.icon"></i>
                                <span slot="title">{{menu.title}}</span>
                            </el-menu-item>

                            <el-submenu :index="`elMenu${index}`" v-if="menu.child">
                                <template slot="title">
                                    <i :class="menu.icon"></i>
                                    <span>{{menu.title}}</span>
                                </template>

                                <template v-for="(child, childIndex) in menu.child">
                                    <el-menu-item :index="`elChildMenu${childIndex}`"
                                                  @click="openUrl(child.uri, child.title)"
                                                  v-if="!child.child">{{child.title}}
                                    </el-menu-item>
                                    <el-submenu :index="`elChildMenu${childIndex}`" v-if="child.child">
                                        <template slot="title">{{child.title}}</template>
                                        <el-menu-item :index="`elChildMenu${childSecIndex}`"
                                                      @click="openUrl(childSec.uri, childSec.title)"
                                                      v-for="(childSec, childSecIndex) in child.child" :key="index">
                                            {{childSec.title}}
                                        </el-menu-item>
                                    </el-submenu>
                                </template>
                            </el-submenu>
                        </template>
                    </el-menu>
                </el-aside>
                <el-main class="summer-main">
                    <el-tabs v-model="editableTabsValue" type="card" closable @edit="handleTabsEdit">
                        <el-tab-pane
                                :key="item.name"
                                v-for="(item, index) in editableTabs"
                                :name="item.name"
                                stlye="height:100%"
                        >
                            <span slot="label" v-html="item.title"></span>
                            <iframe :id="item.name" :src="item.url" frameborder="0"></iframe>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>
            </el-container>
        </el-container>
    </template>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                isCollapse: false,
                activeIndex2: '1',

                maxMenu: 5,
                menus: [],
                menusMore: [],
                subMenus: [],
                subMenu: [],

                editableTabsValue: '0',
                editableTabs: [],
                tabIndex: 2
            }
        },
        methods: {
            openUrl(url, name) {
                let exist = -1
                this.editableTabs.map(function (item, index) {
                    if (item.url === url) {
                        exist = index
                    }
                })
                if(exist !== -1){
                    this.editableTabsValue = '' + exist;
                } else {
                    this.editableTabsValue = '' + this.editableTabs.length;
                    this.editableTabs.push({name: this.editableTabsValue, title: name, url: url})
                }
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleTabsEdit(targetName, action) {
                console.log(action)
                if (this.editableTabs.length < 1) {
                    return false;
                }
                if (action === 'remove') {
                    let tabs = this.editableTabs;
                    let activeName = this.editableTabsValue;
                    if (activeName === targetName) {
                        tabs.forEach((tab, index) => {
                            if (tab.name === targetName) {
                                let nextTab = tabs[index + 1] || tabs[index - 1];
                                if (nextTab) {
                                    activeName = nextTab.name;
                                }
                            }
                        });
                    }
                    this.editableTabsValue = activeName;
                    this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                }
            },
            getMyMenus() {
                let _this = this
                $.getJSON("{:url('/thinkadmin/main/getMyMenus', ['app' => $app])}", function (rs) {
                    if (rs.code !== 200) {
                        return false;
                    }
                    rs.data.forEach((menus, index) => {
                        if (index >= 5) {
                            _this.menusMore.push(menus)
                        }
                        if (menus.child) {
                            _this.subMenus.push(menus.child)
                        } else {
                            _this.subMenus.push([])
                        }
                    })
                    _this.menus = rs.data
                    _this.changeSubMenu(0)
                    if (_this.menus.length > 0) {
                        _this.openUrl(_this.menus[0]['uri'], _this.menus[0]['title'])
                    }

                })
            },
            changeSubMenu(index) {
                this.subMenu = this.subMenus[index]
            }
        },
        created: function () {
            let _this = this
            this.getMyMenus()
            window.addEventListener('message', function (event) {
                if (event.data.url) {
                    _this.openUrl(event.data.url, event.data.blankName ? event.data.blankName : '新窗口')
                }
            }, false);
        }
    })
</script>
<style>
    html, body, #app {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .summer-header i {
        color: #fff;
    }

    .el-menu-top-right-item a {
        text-decoration: none;
        color: #fff;
    }

    .el-menu-top-right-item i {
        color: #fff;
    }

    .summer-header .logo-title {
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }

    .el-menu-top-right > .el-menu-item {
        padding: 0 5px;
    }

    .el-menu-top-right > .el-menu-item, .el-menu-top-right > .el-submenu {
        float: right;
    }


    .el-tab-pane {
        height: 100%;
        width: 100%;
    }

    .summer-main {
        padding: 0;
    }

    .summer-main > .el-tabs, .summer-main > .el-tabs > .el-tabs__content {
        height: calc(100% - 30px);
    }

    .summer-main .el-tabs__header {
        margin: 0;
    }

    .el-tab-pane iframe {
        height: 100%;
        width: 100%;
    }

</style>
</html>